<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-03-26 18:59:12
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2023-03-26 20:35:17
 * @FilePath: \bulletin-board\src\components\elTable\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :height="height"
    :stripe="true"
    :row-class-name="tableRowClassName"
    :row-style="handleRow"
    :cell-style="cellStyle"
    :header-row-style="headeyle"
    :header-cell-style="headerCellstyle"
  >
    <slot />
  </el-table>
</template>

<script>
export default {
  props: {
    height: {
      type: Number,
      default: () => 380
    },
    tableData: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        return 'background: rgba(229,239,255,0.3);height:40.0px;padding:0 10.0px;border:none;color:#2B4054;font-size:16.0px;'
      } else {
        return 'background:#ffffff;height:40.0px;padding:0 10.0px;border:none;color:#2B4054;font-size:16.0px;'
      }
    },
    handleRow() {
      return 'height:40.0px;padding:0 10.0px;border:none;'
    },
    headeyle() {
      return 'background: rgba(229,239,255);height:40.0px;padding:0;border:none;color:#2B4054;font-size:16.0px;'
    },
    headerCellstyle() {
      return 'background: rgba(229,239,255);height:40.0px;padding:0 10.0px;border:none;color:#2B4054;font-size:16.0px;font-weight: 400;'
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table__body-wrapper::-webkit-scrollbar {
  width: 0;
}
::v-deep .el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: transparent;
}
</style>
